<template>
    <div id="registeredMemberStatistics"></div>
</template>

<script>
//1. 下载echarts : npm install echarts
//2. 引入 : import * as echarts from 'echarts'
import * as echarts from "echarts"
import { registeredMemberStatistics } from "../api/index"
export default {
  async mounted() {
    const res = await registeredMemberStatistics();
    const chartDom = document.getElementById("registeredMemberStatistics")
    const myChart = echarts.init(chartDom)
    const option = {
      toolbox: {
        feature: {
          restore: { show: true, title: "刷新" },
          saveAsImage: { show: true, title: "保存" }
        }
      },
      legend: {
        show: true
      },
      title: {
        text: "近7天注册会员数统计",
        left: "center"
      },
      xAxis: {
        type: "category",
        data: [...res.data.dates],//日期字符串
        color: "#ec73a4",
        axisLabel: { interval: 0, rotate: 30 }
      },
      yAxis: {
        type: "value"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999"
          }
        }
      },
      series: [
        {
          data: [...res.data.counter],
          type: "bar",
          itemStyle: {
            color: "#ec73a4",
            borderRadius: [5, 5, 0, 0]
          },
          tooltip: {
            valueFormatter: function (value) {
              return "注册会员数：" + value
            }
          }
        }
      ]
    }
    myChart.setOption(option)
  }
}
</script>

<style scoped lang="scss">
#registeredMemberStatistics {
  height: 350px;
}
</style>
